<template>
	<!-- 我的 -->
	<scroll-view class="page-content" scroll-y="true" @scrolltolower="lower">
		<view class="index-header">
			<view class="index-header-l" v-if="openid===''" @click="tologin">
				<!-- <image class="user_head" :src="userInfo.headimgurl"></image> -->
				<view class="user_head"></view>
				<view class="user_box2">
					<view class="user_name">点击登陆</view>
					<view class="icon-name icons icon-gengduo"></view>
				</view>
			</view>
			<view class="index-header-l" v-else>
				<image class="user_head" :src="userInfo.headimgurl"></image>
				<view class="user_box">
					<view class="user_box_top">
						<view class="user_name">{{userInfo.user_name}}</view>
						<!-- <image class="user_vip" :class="dataobj.is_vip ===2?'user_vip1':'user_vip2'"
							:src="dataobj.is_vip ===2? user_no_vip : user_vip" mode="widthFix"></image> -->
						<view class="user_id">{{(dataobj.clock_scan_auth=== 2 || dataobj.sign_scan_auth=== 2)?'穿越达人':(dataobj.clock_scan_auth=== 1 || dataobj.sign_scan_auth=== 1)?'志愿者':''}}</view>
					</view>
					<view class="user_pho" @click="todetail('identity1')">身份证：{{dataobj.identity_init ===1 ?'未绑定':dataobj.identity}}</view>
				</view>
			</view>
			<view class="index-header-r">
				<!-- <image class="user_jifen" src="../../static/user/icon-jf.png"></image>{{dataobj.integral}}积分 -->
			</view>
		</view>
		<view class="page-body">
			<!--我的进行中-->
			<view class="body-box2">
				<count-info :datalist="dataobj.start_game" @onclick="todetail('underway')"></count-info>
			</view>
			<view class="body-box">
				<!--我的待开赛-->
				<view class="body-cen" @click="todetail('entry')">
					<view class="body-cen-l">
						<!-- <image class="slot-image" src="../../static/user/icon-jb.png" mode="widthFix"></image> -->
						<view class="icon-tb icons icon-nenglijiangbei-"></view>
						<view class="slot-tit">我的待开赛({{dataobj.await_game_number === ''?0:dataobj.await_game_number}})</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
				<!--我的参赛记录-->
				<view class="body-cen" @click="todetail('record')">
					<view class="body-cen-l">
						<!-- <image class="slot-image2" src="../../static/user/icon-ls.png" mode="widthFix"></image> -->
						<view class="icon-tb icons icon-shijian"></view>
						<view class="slot-tit">我的参赛记录</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
				<!--绑定手机-->
				<view class="body-cen" @click="todetail('identity2')">
					<view class="body-cen-l">
						<!-- <image class="slot-image3" src="../../static/user/icon-sj.png" mode="widthFix"></image> -->
						<view class="icon-tb icons icon-credentials_icon"></view>
						<view class="slot-tit">绑定身份证</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
				<!--扫码权限-->
				<view class="body-cen" @click="todetail('saoma')" v-if="dataobj.clock_scan_auth === 1 || dataobj.sign_scan_auth === 1">
					<view class="body-cen-l">
						<!-- <image class="slot-image3" src="../../static/user/saoma.png" mode="widthFix"></image> -->
						<!-- <view class="icon-tb iconfont icon-tubiaolunkuo-"></view> -->
						<uni-icons class="icon-tb" color="#333" size="18" type="scan" fontw="600"/>
						<view class="slot-tit">志愿者扫码</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
				<!--测试-->
				<view class="body-cen" @click="todetail('test')" v-if="ceshi">
					<view class="body-cen-l">
						<!-- <image class="slot-image3" src="../../static/user/saoma.png" mode="widthFix"></image> -->
						<!-- <view class="icon-tb iconfont icon-tubiaolunkuo-"></view> -->
						<uni-icons class="icon-tb" color="#333" size="18" type="scan" fontw="600"/>
						<view class="slot-tit">测试</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
				<!--设置-->
				<view class="body-cen" @click="loginOuts()">
					<view class="body-cen-l">
						<!-- <image class="slot-image3" src="../../static/user/icon-sj.png" mode="widthFix"></image> -->
						<view class="icon-tb icons icon-tuichudenglu"></view>
						<view class="slot-tit">退出登录</view>
					</view>
					<view class="body-cen-r">
						<view class=" icons icon-gengduo"></view>
					</view>
				</view>
			</view>
			<uni-popup ref="popupDialog" type="dialog">
				<uni-popup-dialog :type="msgType" :title="poptitle" content="" :before-close="false"
					@confirm="dialogConfirm">
				</uni-popup-dialog>
			</uni-popup>
			<view class="example-body" v-show="isloadding==='loading'">
				<uni-load-more iconType="snow" :status="isloadding" />
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	import countInfo from './components/count_info.vue'
	import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import uniLoadMore from "@/components/uni-load-more/uni-load-more2.vue"
	//接口
	import {
		getuserinfos, //获取用户信息
		getScanInfos
	} from '@/common/api.js'
	export default {
		components: {
			countInfo,uniIcons,
			uniListItem,
			uniPopupDialog,uniLoadMore
		},
		data() {
			return {
				ceshi:false, //测试
				user_vip: '/static/user/icon-vip.png',
				user_no_vip: '/static/user/icon-novip.png',
				poptitle:'',
				poptype:'',
				dataobj: {
					userhead: '',
					phoneNumber:'',
					username: '',
					integral: '',
					is_vip : '',
					lock_scan_auth:'',
					sign_scan_auth:'',
					await_game_number:'',
					start_game:{}
				},
				start_game: {
					statu: '1',
					ewm: '',
					title: '2021春季城市穿越大型2021春季城市穿越大型',
					time: '2021/04/07 08:00',
					teamname: '秋名山战神队',
					clock_sta: '2',
					clock_num: '6',
					clock_on_num: '3'
				},
				msgType: 'info',
				isloadding: '',
			}
		},
		computed: {
			...mapState(['hasLogin', 'openid', 'token', 'agent_id', 'userInfo'])
		},
		onShow() {
			this.getUser();
		},
		onLoad() {
			this.getUser();
		},
		methods: {
			...mapMutations(['setLogin', 'setloginStatus', 'setUserInfo', 'login', 'loginOut']),
			//获取用户信息
			getUser(){
				getuserinfos().then(res => {
					if (res.code === 2000) {
						this.dataobj.identity_init = res.data.identity_init;
						this.dataobj.identity = res.data.identity;
						this.dataobj.integral = res.data.integral; 
						this.dataobj.is_vip = res.data.is_vip;
						this.dataobj.start_game = res.data.start_game;
						this.dataobj.await_game_number = res.data.await_game_number;
						this.dataobj.lock_scan_auth = res.data.lock_scan_auth;
						this.dataobj.sign_scan_auth = res.data.sign_scan_auth;
						this.dataobj.game_number = res.data.game_number;
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: "none"
						});
					}
				})
			},
			tologin() {
				// #ifdef MP
				uni.reLaunch({
					url: '/packageA/public/tologin?from=user'
				})
				// #endif
			},
			//跳转授权登录
			dialogConfirm() {
				if(this.poptype==='1'){
					//跳转授权登录
					// #ifdef MP
					uni.reLaunch({
						url: '/packageA/public/tologin?from=user'
					})
					// #endif
					this.$refs.popupDialog.close()
				}else if(this.poptype==='2'){
					//跳转绑定身份证
					let type = 'identity1';
					uni.navigateTo({
						url: `/pages/user/changeInfo?type=${type}`
					})
					this.$refs.popupDialog.close()
				}
				
			},
			////退出登录
			loginOuts(){
				uni.showModal({
					title: '提示',
					confirmText: '确定',
					content: '确定退出登录吗?',
					success: (res2) => {
						if (res2.confirm) {
							this.loginOut()
							uni.showToast({
								title: '退出成功',
								duration: 2000,
								icon: 'none'
							})
						} else if (res2.cancel) {}
					}
				});
			},
			//跳转详细页
			todetail(type) {
				//未登录拦截
				let _self = this;
				let super_token = uni.getStorageSync('super_token');
				let identity = this.userInfo.identity
				if (super_token === "") {
					this.poptitle = "需要您授权登录!";
					this.poptype = '1';
					this.$refs.popupDialog.open()
				}else if ((identity === "" || identity === undefined ) && (type != 'identity1' && type != 'identity2')) {
					this.poptitle = "需要您绑定身份证!"
					this.poptype = '2';
					this.$refs.popupDialog.open()
				} else {
					if (type === 'underway') {
						if(Object.keys(this.dataobj.start_game).length === 0){
							return
						}
						let game_id = this.dataobj.start_game.game_id
						uni.navigateTo({
							url: '/pages/user/entryDetail?id='+ game_id
							//url: `/packageA/clockIn/clockIn?game_id=${game_id}`
						})
					}else if (type === 'entry') {
						uni.navigateTo({
							url: `/pages/user/entry`
						})
					} else if (type === 'identity1') {
						uni.navigateTo({
							url: `/pages/user/changeInfo?type=${type}`
						})
					}else if (type === 'identity2') {
						uni.navigateTo({
							url: `/pages/user/changeInfo?type=${type}`
						})
					}else if (type === 'record') {
						uni.navigateTo({
							url: `/pages/user/entryRecord`
						})
					}else if (type === 'test') {
						uni.navigateTo({
							url: `/packageA/test/test`
						})
					}else if (type === 'saoma') {
						uni.navigateTo({
							url: `/packageA/ewm/clockList`
						})
						// 只允许通过相机扫码
						/* uni.scanCode({
						    onlyFromCamera: true,
						    success: function (res) {
						        console.log('条码类型：' + res.scanType);
						        console.log('条码内容：' + res.result);
								_self.isloadding = 'loading';
								getScanInfos({code:res.result}).then(res2=>{
									console.log(222333,res2)
									_self.isloadding = 'load';
									if(res2.code === 2000){
										if(res2.data.type === 'clock'){
											uni.navigateTo({
												url: `/packageA/ewm/clock?code=${res2.data.code}`
											})
										}else if(res2.data.type === 'sign'){
											uni.navigateTo({
												url: `/packageA/ewm/sign?code=${res2.data.code}`
											})
										}else if(res2.data.type === 'equip'){
											uni.navigateTo({
												url: `/packageA/ewm/draw?code=${res2.data.code}`
											})
										}
									}else{
										uni.showToast({
											title: res2.msg,
											duration: 2000,
											icon: 'none'
										})
									}
								})
						    }
						});*/
					}else {
						uni.showToast({
							title: '功能暂未开放',
							duration: 2000,
							icon: "none"
						})
					} 
				}
			},
			handleClear() {
				this.$refs.popupDialog.open()
			}
		},
		onPullDownRefresh() {
			console.log('refresh');
			this.getUser();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			
		}
	}
</script>

<style lang="scss">
	.example-body{
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		left: calc(50% - 150rpx);
		top: calc(50% - 150rpx);
		width: 300rpx;
		height: 300rpx;
		background: rgba(0,0,0,0);
	}
	.icon-tb {
		margin-right: 0rpx;
		font-weight: bold;
		font-size: 36rpx;
		width: 60rpx;
	}

	.user_vip1 {
		width: 125rpx;
	}

	.user_vip2 {
		width: 95rpx;
	}

	.page-content {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.page-body {
		display: flex;
		flex-direction: column;
		height: calc(100% - 100rpx);
		padding: 30rpx;
		margin-bottom: 40rpx;

		.body-box2 {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			height: 345rpx;
			padding: 0 30rpx;

			count-info {
				flex: 1;
			}
		}

		.body-box {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;
			overflow: hidden;
			padding: 0 30rpx;

			.body-cen {
				display: flex;
				flex: 1;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #f5f5f5;
				line-height: 100rpx;

				.body-cen-r {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					text-align: right;
				}

				.body-cen-l {
					flex: 2;
					display: flex;
					align-items: center;

					.slot-tit {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.slot-image {
						width: 35rpx;
						height: 31rpx;
						margin-right: 20rpx;
					}

					.slot-image2 {
						width: 31rpx;
						height: 31rpx;
						margin-right: 24rpx;
					}

					.slot-image3 {
						width: 40rpx;
						height: 40rpx;
						margin-right: 20rpx;
					}
				}
			}
			.body-cen:last-of-type{
				border-bottom: none;
			}
		}
	}

	.index-header {
		flex: 1;
		height: 216rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #02BB6F;
		padding: 0 32rpx;

		.index-header-l {
			display: flex;
			align-items: center;

			.user_head {
				display: flex;
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 20rpx;
				background: rgba(0, 0, 0, .2);
			}

			.user_box {
				display: flex;
				flex-direction: column;
				.user_box_top{
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					.user_name {
						font-size: 36rpx;
						line-height: 36rpx;
						font-weight: bold;
						color: #fff;
						margin-right: 14rpx;
					}
					.user_id{
						height: 30rpx;
						background:rgba(255,255,255,.5);
						border-radius: 15rpx;
						font-size: 18rpx;
						font-weight: 400;
						line-height: 30rpx;
						color: #006D40;
						padding: 0 20rpx;
					}
					.user_vip {
						height: 35rpx;
					}
				}
				.user_pho{
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.user_box2{
				display: flex;
				align-items: center;
				line-height: 50rpx;
				.user_name {
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
					margin-right:20rpx;
				}
				.icon-name{
					font-size: 36rpx;
					font-weight: bold;
					color: #fff;
					margin-top: 4rpx;
				}
			}
		}

		.index-header-r {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-weight: bold;
			color: #FFFFFF;

			.user_jifen {
				width: 27rpx;
				height: 24rpx;
				margin-right: 14rpx;
			}
		}
	}
</style>
